<template>
  <div class="my-invoice">  
    <div class="list-item isbtn" v-for="(item,index) in invoiceList" :key="index" @click="goDetail(index)">
        <div class="first-line">
            <div><span class="gray">金额:</span>￥{{item.price}} </div>
            <div><span class="gray">状态:</span> <span :class="'status'+item.status">{{item.statusText}}</span> </div>
        </div>
        <div>
            <div><span class="gray">日期:</span>{{item.addTime}} </div>
        </div>
    </div>
    <div class="height120"></div>
    <div class="btn isbtn" @click="$router.push('/invoiceOrderAdd')">申请开票</div>
  </div>
</template>

<script>
import api from '@/api/api.js' 
export default { 
  components: { 
  },
  data () {
    return {
      filterObj:{
          pageNum:1,
          pageSize:10,
      },
      invoiceList:[],
    }
  },
  created(){
      this.getList();
  },
  mounted () {
      
  },

  filters: {
     
  },
  methods: {
    goDetail(idx){
        this.$router.push({ path:'/myInvoiceDetail',query:{ id:this.invoiceList[idx].invoiceId }})
    },
    getList(){
      api.invoiceMng.myInvoiceList({ 
      },res=>{
        this.invoiceList=res.result.data; 

      })
    }
  }
}
</script>
<style lang="less" scoped>
    .my-invoice{
        min-height: 100vh;
        background: #f7f7f7;
        padding-top: 20px;
    }
    .list-item{
        width: 90%;
        margin:0 auto;
        border-radius: 8px;
        background: #fff; 
        padding: 12px;
        margin-bottom: 12px;
    }
    .first-line{
        display: flex;
        padding-bottom: 7px;
        &>div{
            flex: 1;
        }
    }
    .gray{
        color:#666
    }
    .status0{
        color: rgb(120, 231, 8);
    }
    .status1{
        color: rgb(5, 5, 141);
    }
    .status3{
        color: rgb(128, 127, 127);
    }
    .height120{
        height: 60px;
    }
    .btn{
        text-align: center;
        line-height: 50px;
        background: #FABE00;
        color: #fff;
        height: 50px;
        font-size: 16px;
        letter-spacing: 4px;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
    }
</style>